<template>
  <div class="container">
    <div class="trees">
      <div class="treeP">
        <p class="titles">
          <label><span>组织架构</span></label>
        </p>
        <div class="tree1">
          <el-tree
            ref="tree"
            v-loading="listLoading"
            :data="data"
            :props="defaultProps"
            show-checkbox
            expand-on-click-node
            :default-expanded-keys="expanded"
            :check-on-click-node="true"
            node-key="id"
            @check="handleCheckChange"
          />
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" icon="el-icon-arrow-right" circle/>
      </div>
      <div class="treeP">
        <p class="titles">
          <label><span @click="quit">清空</span></label>
        </p>
        <div class="tree1">
          <el-tree
            :data="selectedData"
            node-key="id"
            draggable
            :expand-on-click-node="true">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">删除</el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getDepts } from '@/api/framework/system/dept'

  export default {
    name: 'commonSelect',
    data() {
      return {
        dialog: false,
        listLoading: false,
        checked: false,
        selectedData: [],
        data: [],
        expanded: ['1','14986188603464026668'],
        defaultProps: {
          id: 'id',
          children: 'children',
          label: 'name'
        }
      }
    },
    created() {
      this.getDepts()
    },
    methods: {
      getDepts() {
        this.listLoading = true
        getDepts({ enabled: true }).then(res => {
          this.data = res.content
          this.listLoading = false
        })
      },
      // 删除
      remove(node, data) {
        // 清除选中
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex(d => d.id === data.id)
        children.splice(index, 1)
        // 取消勾中
        this.$refs.tree.setChecked(data.id, false)
      },
      // 全删
      quit() {
        this.selectedData = []
        this.$refs.tree.setCheckedKeys([])
      },
      // 添加
      handleCheckChange(data, checked) {
        this.selectedData = []
        checked.checkedNodes.forEach((item, index) => {
          if (item.children === undefined || item.children.length === 0) {
            this.selectedData.push(item)
          }
        })
      },
      getResult() {
        const data = []
        this.selectedData.forEach(item => {
          const itemInfo = {
            id: item.id,
            name: item.name
          }
          data.push(itemInfo)
        })
        return { type: 1, data: data }
      }
    }
  }
</script>

<style>
  .container {
    padding: 0;
  }

  .trees {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .tree1 {
    height: 500px;
    padding: 5px;
    overflow: auto
  }

  .treeP {
    width: 40%;
    border: 1px solid #ebeef5;
    border-radius: 5px;
  }

  .titles {
    height: 40px;
    border-bottom: 1px solid #f5f7fa;
    margin: 0;
    box-sizing: border-box;
    padding: 0 5%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }

  .btn {
    margin: auto;
  }
</style>
